<template>
  <view>
    <shop-cart ref="shopCart" :selectKey="selectKey" :cart-list="cartList" :select-cart-list="selectCartList"
               @operateCount="operateCount" @triggerSelect="triggerSelect" @triggerSelectAll="triggerSelectAll"
               @toDetail="toDetail" @submit="submit" @cartDelete="cartDelete"></shop-cart>
  </view>
</template>

<script>
import {getShoppingCartPage, updateShoppingCart, deleteShoppingCart, subShoppingCart} from "@/api/cart";
import {createOrders} from "@/api/orders";
export default {
  mounted() {
    this.queryCartList()
  },
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        productName: null,
        productImage: null,
        productSpecification: null,
        quantity: null,
        price: null,
        paymentStatus: null,
        createTime: [],
      },
      selectKey: "id",
      selectCartList: [],
      cartList: [{
        _id: '1',
        count: 1,
        shopName: '新款高端复古长袖国风棉麻衣裙',
        shopTagList: [{
          _id: '1',
          category: "复古"
        }],
        price: 38000,
        shopImage: "https://mp-26700ea2-c458-4911-a841-ced4a32d3d98.cdn.bspapp.com/component/WechatIMG8.png"
      }, {
        _id: '2',
        count: 1,
        shopName: '星诺满园秋光复古优雅气质长袖橘红色连衣裙',
        shopTagList: [{
          _id: '1',
          category: "复古"
        }, {
          _id: '2',
          category: "连衣裙"
        }],
        price: 27800,
        shopImage: "https://mp-26700ea2-c458-4911-a841-ced4a32d3d98.cdn.bspapp.com/component/WechatIMG9.png"
      }],
    };
  },
  methods: {
    queryCartList(){
      getShoppingCartPage(this.queryParams).then(res=>{
        console.log(res.data.data)
        this.cartList = res.data.data.list
      })
    },
    submit() {
      const selectList = this.cartList.filter((item) => this.selectCartList.includes(item[this.selectKey]))
      console.log('-submit-', selectList)
      //这里要把这个购物车的所有数据变为已结算并且生成订单信息
      selectList.forEach(item=>{
        item.paymentStatus = 2
        subShoppingCart(item).then(res=>{
          console.log(res.data.msg)
          // this.$router.push({
          //   path: '/pages/orders/index',
          //   query: { list: JSON.stringify(selectList) }
          // });
          uni.navigateTo({
            url: '/pages/orders/index?list=' + JSON.stringify(selectList)
          })
        })
      })

    },
    toDetail(item) {
      console.log('-toDetail-', item)
    },
    cartDelete(index,item) {
      console.log(item)
      deleteShoppingCart(item.id).then(res=>{
        if (res.data.code === 0){
          this.cartList.splice(index, 1)
          this.queryCartList()
          this.$refs.shopCart.calculatePrice()
        }
      })
    },
    operateCount(params) {
      console.log(params)
      const {
        item,
        type
      } = params
      if (type === 'add') {
        item.quantity += 1
      } else if (type === 'del' && item.quantity >= 2) {
        item.quantity -= 1
      }
      updateShoppingCart({
        id:item.id,
        quantity:item.quantity
      }).then(res=>{
        if (res.data.code === 0){
          this.queryCartList()
          this.$refs.shopCart.calculatePrice()
        }
      })

    },
    triggerSelect(item) {
      const findIndex = this.selectCartList.findIndex(t => t === item[this.selectKey])
      if (findIndex === -1) {
        this.selectCartList.push(item[this.selectKey])
      } else {
        this.selectCartList.splice(findIndex, 1)
      }
    },
    triggerSelectAll(selectAll) {
      if (selectAll) {
        this.selectCartList = []
      } else {
        this.selectCartList = this.cartList.map(item => item[this.selectKey])
      }
    }
  },
}
</script>

<style lang="scss">
page {
  background: rgb(246, 246, 246);
  padding-bottom: 150rpx;
}
</style>
